import { getModule, Module, Mutation, VuexModule } from 'vuex-module-decorators';
import store from '@/stores';
import { Todo } from '@/utils/types';
import sortBy from 'lodash/sortBy';

@Module({store, dynamic: true, name: 'todo-store'})
export class TodoStore extends VuexModule {
    todos: Array<Todo> = localStorage.todos
        ? JSON.parse(localStorage.todos)
        : [];

    get sortTodos() {
        return sortBy(this.todos, it => it.isDone);
    }

    @Mutation
    addTodo(todo: Todo) {
        this.todos.push(todo);
    }

    @Mutation
    deleteTodo(id: string) {
        this.todos.splice(this.todos.findIndex(it => it.id === id), 1);
    }

    @Mutation
    doneTodo(id: string) {
        const todoItem = this.todos.find(it => it.id === id);
        if (todoItem) {
            todoItem.isDone = true;
        }
    }
}

export const $todoStore = getModule(TodoStore);
